<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo6</title>
    <style>
        .false{
            color: red;
        }
        .true{
            color: green;
        }
    </style>
</head>
<body>
    <input type="button" value="重新开始游戏" class="reSet" onclick="reSet()"><br>
    请输入要猜的数字：<input type="text" class="to_guess_num" value="0"><input type="button" value="猜" class="to_guess" onclick="guess()"><br>
    已经猜的次数：<span class="to_guess_time">0</span><br>
    结果：<span class="result"></span>
</body>
<script>
    let reSet_element = document.querySelector(".reSet");
    let to_guess_num_element = document.querySelector(".to_guess_num");
    let to_guess_element = document.querySelector(".to_guess");
    let to_guess_time_element = document.querySelector(".to_guess_time");
    let result_element = document.querySelector(".result");
    function reSet(){
        to_guess_num_element.value = 0;
        to_guess_time_element.innerHTML = 0;
        result_element.innerHTML = "";
    }
    let num = Math.floor(Math.random() * 100) + 1;
    console.log(num);
    function guess(){
        to_guess_time_element.innerHTML = parseInt(to_guess_time_element.innerHTML) + 1;
        if(num > parseInt(to_guess_num_element.value)){
            result_element.innerHTML = "猜小了";
            result_element.className = "false";
        }else if(num < parseInt(to_guess_num_element.value)){
            result_element.innerHTML = "猜大了";
            result_element.className = "false";
        }else{
            result_element.innerHTML = "猜对了";
            result_element.className = "true";
        }
    }
</script>
</html>